<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
       @font-face {font-family: 'iconfont';
        src: url('iconfont.eot'); /* IE9*/
        src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('iconfont.woff') format('woff'), /* chrome、firefox */
        url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
       }
	  .iconfont{
	    font-family:"iconfont" !important;
	    font-size:30px;
	    font-style:normal;
	    color:#8098AD;
	    font-weight: 700;
	    -webkit-font-smoothing: antialiased;
	    -webkit-text-stroke-width: 0.2px;
	    -moz-osx-font-smoothing: grayscale;
	   }
	   .iconfont1{
	    font-family:"iconfont" !important;
	    font-weight: 700;
	    font-size:20px;
	    font-style:normal;
	    color:#8098AD;
	    -webkit-font-smoothing: antialiased;
	    -webkit-text-stroke-width: 0.2px;
	    -moz-osx-font-smoothing: grayscale;
	   }
	    body,div,p,h1,button,img{
	    	margin:0;
	    	padding:0;
	    }
        .bg{
        	background-color: #E3E9ED;
        	width:472px;
        	height:660px;
        	padding-top:22px;
        	padding-bottom:22px;
        	float: left;
        	z-index:9999;
        }
        .main{
        	position: relative;
        	border-radius: 6px;
        	background-color: #fff;
        	width:400px;
        	height: 663px;
        	margin: 0px auto;
        	overflow: hidden;
        }
        .content,.contentTit{
        	width:400px;
        	height:96px;
        	border-bottom:2px solid #E3E9ED;
        	background-color: #fff;
        }
        .search{
        	position: absolute;
        	bottom:0px;    /* 让底部搜索框定位 */
        	width:100%;
        	left:0px;
        	height:82px;
        	line-height: 82px;
        	background-color: #E3E9ED;
        	border-bottom:2px solid #E3E9ED;
        }
        .tit{
        	width:33.3%;
        	height:97%;
        	line-height:93px;
        	float: left;
        	border-bottom:none;
        	text-align: center;
        	cursor:pointer;
        }
        .tith{
        	width:33.3%;
        	height: 97%;
        	line-height:93px;
        	text-align: center;
        	float: left;
        	border-bottom:4px solid #E3E9ED;
        	cursor:pointer;
        }
        .linkman{
        	border-bottom: 4px solid #85B4F3;
        }
        img{
        	width:52px;
        	height:52px;
        	margin:20px;
        	float: left;
        }
        .text{
        	float: left;
        	padding-top:25px;
        }
        h1{
        	font:22px "微软雅黑";
        	font-weight: 800;
        	color:#4C708F;
        }
        p{
        	font:16px "微软雅黑";
        	color:#A6B5C0;
        }
        .circle{
        	width:15px;
        	height:15px;
        	float: right;
        	margin-top: 40px;
        }
        button{
        	background-color: #E3E9ED;
        	border:none;
        	outline: medium;
        }
        .pic-search{
        	margin-top: -5px;
        	margin-left: 15px;
        	float: left;
        }
        .bottom-srh{
        	background-color: #E3E9ED;
        	margin-top: 8px;
        	border:none;
        	outline: medium;
        	width:322px;
        	height:50px;
        	float: right;
        	font:18px "微软雅黑";
        	color:#7E95AB;
        }
        .cont{
        	float: left;
        	padding-right: 36px;
        }
        .line{
        	width:2000px;
        	position: absolute;
        	left: 0px;
        	z-index: 0;
        }
       
	</style>
	<script type="text/javascript">
	    //通过classname来获取函数的封装
		function getByClass(clsName,parent){
	        var oParent=parent?document.getElementById(parent):document,
	        eles=[],
	        elements=oParent.getElementsByTagName('*');

	        for(var i=0,l=elements.length;i<l;i++){
	            if(elements[i].className==clsName){
	            eles.push(elements[i]);
	             }
	        }
	        return eles;
	    }
        //自动英文字母小写转大写函数
	    function upper(){
	    	var letter = getByClass("bottom-srh")[0].value.toUpperCase();
	    	getByClass("bottom-srh")[0].value = letter;
	    }
	    //tab带有左右划入划出效果函数
      /*floor 返回不大于的最大整数  found 则是4舍5入的计算，入的时候是到大于它的整数      ceil则是不小于他的最小整数*/ 
      function move(obj,iTarget){
      	clearInterval(obj.timer);
      	obj.timer = setInterval(function(){
            var speed = (iTarget-obj.offsetLeft)/8;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            if(obj.offsetLeft==iTarget){
            	clearInterval(obj.timer);
            }else{
            	obj.style.left = obj.offsetLeft + speed + "px";
            }
      	},30)
      }

		window.onload = function(){
			var contents = getByClass("content");
			//给每一个列表添加鼠标移上去改变背景颜色事件
			for(var i=0;i<contents.length;i++){
				contents[i].onmouseover = function(){
					for(var i=0;i<contents.length;i++){
						contents[i].style.backgroundColor = "#fff";
					}
					this.style.backgroundColor = "#E3E9ED";
				}
			}
            //点击第一行内容与下边框随之替换
            var tits = getByClass("tit");
            var conts = getByClass("cont");
            for(var i=0;i<tits.length;i++){
            	tits[i].index = i;
            	tits[i].onclick = function(){
            		for(var i=0;i<tits.length;i++){
            			tits[i].className = "tit";  //给所有tit元素先取消border-bottom
            			getByClass("iconfont")[i].style.color = "#8098AD";
            		}
            		this.className = "tith";
            		getByClass("iconfont")[this.index].style.color = "#4C91ED";
            	    move(getByClass("line")[0],0-436*this.index);//因为padding-right：36px；
            	}
            }
            //自动英文字母小写转大写调用
            getByClass("search")[0].onkeyup = upper;
		}
	</script>
</head>
<body>
	<div class="bg">
		<div class="main">
			<div class="contentTit">
				<div class="tit"><i class="iconfont">&#xe688;</i></div>
				<div class="tit"><i class="iconfont">&#xe610;</i></div>
				<div class="tit"><i class="iconfont">&#xe65f;</i></div>
		    </div>
		    <div class="line">
    	<!-- 第一个显示内容 -->
		  <div class="cont">
			<div class="content">
				<img src="./pic.png"/>
				<div class="text">
					<h1>Miro Badev</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/>
			</div>
			<div class="content">
				<img src="./pic.png"/>
				<div class="text">
					<h1>Miro Badev</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/>
			</div>
			<div class="content">
				<img src="./pic.png"/>
				<div class="text">
					<h1>Miro Badev</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/>
			</div>
			<div class="content"><img src="./pic.png"/>
				<div class="text">
					<h1>Miro Badev</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/></div>
			<div class="content"><img src="./pic.png"/>
				<div class="text">
					<h1>Miro Badev</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/></div>
		</div>
		<!-- 第二个显示内容 -->
		<div class="cont" id="cont1">
			<div class="content">
				<img src="./pic.png"/>
				<div class="text">
					<h1>Martin Joseph</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/>
			</div>
			<div class="content">
				<img src="./pic.png"/>
				<div class="text">
					<h1>Martin Joseph</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/>
			</div>
			<div class="content">
				<img src="./pic.png"/>
				<div class="text">
					<h1>Martin Joseph</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/>
			</div>
			<div class="content"><img src="./pic.png"/>
				<div class="text">
					<h1>Martin Joseph</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/></div>
			<div class="content"><img src="./pic.png"/>
				<div class="text">
					<h1>Martin Joseph</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/></div>
		</div>
		<!-- 第三个显示内容 -->
		<div class="cont" id="cont2">
			<div class="content">
				<img src="./pic.png"/>
				<div class="text">
					<h1>Tomas Kennedy</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/>
			</div>
			<div class="content">
				<img src="./pic.png"/>
				<div class="text">
					<h1>Tomas Kennedy</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/>
			</div>
			<div class="content">
				<img src="./pic.png"/>
				<div class="text">
					<h1>Tomas Kennedy</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/>
			</div>
			<div class="content"><img src="./pic.png"/>
				<div class="text">
					<h1>Tomas Kennedy</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/></div>
			<div class="content"><img src="./pic.png"/>
				<div class="text">
					<h1>Tomas Kennedy</h1>
				    <p>mirobadev@gmail.com</p>
				</div>
				<img src="./circle.png" class="circle"/></div>
		</div>
    </div>
		<!-- 搜索框 -->
		    <div class="search">
		       <div class="pic-search">
		       	<i class="iconfont1">&#xe611;</i>
		       </div>
				<input type="text" class="bottom-srh"/>
		    </div>
	    </div>
    </div>
    
</body>
</html>